<template>
    <div class="access">
        <Header title="门禁记录" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <loading  v-if="isflag" />
        <div class="box_notice" ref="wrapper">
            <ul>
                <li class="box_li" v-for="(item,index) in list" :key="index">
                    <div class="box_one">
                        <p>{{item.lockName}}</p>
                        <p class="user">{{item.userName}}</p>
                        <p class="men">{{item.typeDesc}}</p>
                    </div>
                    <div class="box_two">
                        <p class="time">开门时间:{{item.createDate}}</p>
                        <p class="success" v-if="item.status === 'T'">成功</p>
                        <p class="success" v-else>失败</p>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
import Header from './header'
import {old_ccess} from '../old_request'
import BScroll from 'better-scroll'

export default {
    data(){
        return {
            list:[],
            isflag:true
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                //返回上一页
        }
    },
    created(){
        let that = this;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
        let data = {
            "sign":that.$md5(`${that.wrapper.globalData()}blockId=${that.$store.state.blockid}timestamp=${that.wrapper.gettime()}`),
            "timestamp":that.wrapper.gettime(),
            "blockId":that.$store.state.blockid,
            "userId":that.$store.state.userid,
            "mobile":that.wrapper.getlocalstoage('mobile'),
            "pageNo":1,
            "pageSize":10
        }
        old_ccess(data,that).then( (res) => {               //请求方式并没有错 请求下来的速度不行
            console.log(res)
            that.list = res.data;
            that.isflag = false;
            that.$nextTick( () => {
                new BScroll(that.$refs.wrapper);
            })
        })
    }
}
</script>

<style scoped>
    .access{
        position: fixed;
        width: 100%;
        height: 100%;
        background: #EFEFF4;
        z-index: 9999999;
        margin-top: 50px;
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .box_notice{
        width: 95%;
        margin: 10px auto;
        height: 700px;
        overflow: hidden;
    }
    .box_notice ul{
        height: 1100px;
        /* padding-top: 10px; */
    }
    .box_notice li{
        background: #FFFFFF;
        height: 80px;
        margin-top: 10px;
    }
    .box_li{
        display: flex;
        flex-direction: column;
    }
    .box_one{
        display: flex;
        position: relative;
        padding:15px 0 0 15px;
        font-size: 17px;
    }
    .box_one .men{
        position: absolute;
        right: 15px;
    }
    .user{
        padding-left: 15px;
    }
    .time{
        font-size: 12px;
    }
    .box_two{
        display: flex;
        padding:22px 0 0 15px;
        position: relative;
    }
    .box_two .success{
        position: absolute;
        right: 15px;
    }
</style>